<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>03_component_basic</title>
</head>
<body>

  <div id="example1"></div>
  <div id="example2"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">

    /**
     * 组件化编程的步骤
      */

    // 1、定义组件（有两种方式）

    // 方式1：工厂函数组件（简单组件：没有状态的组件，如果使用了状态，需要使用class进行组件定义）
    function MyComponent() {
      return <h2>工厂函数组件（简单组件）</h2>;
    }

    // 方式2： ES6类组件（复杂组件），相当于定义了一个组件的子类
    class MyComponent2 extends React.Component {

      // 里面有一个render方法需要重写
      render() {
        return <h2>ES6类组件（复杂组件）</h2>;
      }
    }

    // 2、渲染组件标签
    ReactDOM.render(<MyComponent/>, document.getElementById('example1'));
    ReactDOM.render(<MyComponent2/>, document.getElementById('example2'));
  </script>
</body>
</html>
